import React from "react"
import styles from "../style.module.scss"
import { connect } from "react-redux"
import { rootState } from "../../../store"

interface ITopicProps {
	topicList?: { id: number; title: string; imageURL: string }[]
}

class Topic extends React.Component<ITopicProps> {
	render(): React.ReactNode {
		return (
			<div className="p-2">
				{this.props.topicList?.map(item => (
					<span className="d-inline-block p-2 rounded bg-light border border-secondary me-2 mb-2" key={item.id}>
						<img className={`${styles["topic-img"]} rounded`} src={item.imageURL} alt="" />
						<span className="ps-2">{item.title}</span>
					</span>
				))}
			</div>
		)
	}
}

const mapState = (state: rootState) => ({
	topicList: state.home.topicList,
})

export default connect(mapState, null)(Topic)
